<template>
<div class="settings-page">
  <div class="container page">
    <div class="row">
      <div class="col-md-6 offset-md-3 col-xs-12">
        <h1 class="text-xs-center">Your Settings</h1>

        <ul class="error-messages">
          <li>That name is required</li>
        </ul>

        <form>
          <fieldset>
            <input v-model="author.username" class="form-control" type="text" placeholder="watchwatchwatch" />
            <fieldset class="form-group">
              <input class="form-control" type="text" placeholder="URL of profile picture" />
            </fieldset>
            <fieldset class="form-group">
              <input class="form-control form-control-lg" type="text" placeholder="Your Name" />
            </fieldset>
            <fieldset class="form-group">
              <textarea
                class="form-control form-control-lg"
                rows="8"
                placeholder="Short bio about you"
              ></textarea>
            </fieldset>
            <fieldset class="form-group">
              <input class="form-control form-control-lg" type="text" placeholder="Email" />
            </fieldset>
            <fieldset class="form-group">
              <input
                class="form-control form-control-lg"
                type="password"
                placeholder="New Password"
              />
            </fieldset>
            <button class="btn btn-lg btn-primary pull-xs-right">Update Settings</button>
          </fieldset>
        </form>
        <hr />
        <button class="btn btn-outline-danger">Or click here to logout.</button>
      </div>
    </div>
  </div>
</div>
</template>
<script setup lang="ts">
import { Author } from '@/model';
import { ref, watch } from 'vue'

const msg = ref<string>('')
watch(msg, (newmsg,oldmsg)=>{
  console.log(`newmsg ${newmsg}`);
  console.log(`oldmsg ${oldmsg}`);
})

const author = ref<Author>({
  username: 'lisi',
  bio: '',
  image: '',
  following: false
})
watch(
  ()=>author.value.username
, 
(new_value,old_value)=>{
  console.log(`newmsg ${new_value}`);
  console.log(`oldmsg ${old_value}`);
})


</script>
<style scoped>
</style>
